<template>
  <!-- 系统设置弹框 -->
  <n-modal
    :mask-closable="false"
    v-model:show="systemSwitch"
    class="sys-dialog"
    preset="dialog"
    :show-icon="false"
    :on-close="closeBtn"
    transform-origin="center"
    style="background: #60676c; color: #fff; width: 700px"
  >
    <template #header>
      <div class="title-font">系统设置</div>
    </template>
    <div class="setting-dialog">
      <div class="setting-item">系统名称</div>
      <div class="setting-item">
        <n-input
          maxlength="50"
          v-model:value="params.systemName"
          type="text"
          placeholder="请输入系统名称"
        />
      </div>
      <div class="setting-item">
        <div class="level-menu">一级菜单</div>
        <div class="style-check">
          <div class="item-style">
            <n-select
              class="font-select"
              placeholder="请选择字体"
              v-model:value="params.mainMenuFont"
              size="medium"
              v-model:show="show1"
              :options="options"
            >
              <template #arrow>
                <transition name="slide-left">
                  <icons v-if="!show1" class="icon" name="adown" />
                  <icons v-else class="icon" name="atop" />
                </transition>
              </template>
            </n-select>
          </div>
          <div class="item-style">
            <n-select
              class="font-select"
              placeholder="请选择字体大小"
              v-model:value="params.mainMenuSize"
              size="medium"
              v-model:show="show2"
              :options="options1"
            >
              <template #arrow>
                <transition name="slide-left">
                  <icons v-if="!show2" class="icon" name="adown" />
                  <icons v-else class="icon" name="atop" />
                </transition>
              </template>
            </n-select>
          </div>
          <div class="item-style" @click="showColor1 = !showColor1">
            <div class="text">A</div>
            <icons v-if="!showColor1" class="icons" name="adown" />
            <icons v-else class="icons" name="atop" />
            <n-color-picker
              :show="showColor1"
              :show-alpha="false"
              v-model:value="params.mainMenuFontColor"
              class="color-picker"
              :render-label="bgColorLabel"
              @update:show="aaa"
            />
          </div>
          <div
            class="item-style bold"
            @click="params.mainMenuIsBlod = !params.mainMenuIsBlod"
            :style="{ fontWeight: params.mainMenuIsBlod ? 'bold' : 'normal' }"
          >
            B
          </div>
        </div>
        <div class="level-menu margin-left20">一级菜单背景色</div>
        <div class="bg-color">
          <n-color-picker
            class="color-picker"
            :show-alpha="false"
            :render-label="bgColorLabel"
            v-model:value="params.mainMenuBackgroundColor"
          />
        </div>
      </div>
      <div class="setting-item">
        <div class="level-menu">二级菜单</div>
        <div class="style-check">
          <div class="item-style">
            <n-select
              class="font-select"
              placeholder="请选择字体"
              v-model:value="params.secondaryMenuFont"
              size="medium"
              v-model:show="show3"
              :options="options"
            >
              <template #arrow>
                <transition name="slide-left">
                  <icons v-if="!show3" class="icon" name="adown" />
                  <icons v-else class="icon" name="atop" />
                </transition>
              </template>
            </n-select>
          </div>
          <div class="item-style">
            <n-select
              class="font-select"
              placeholder="请选择字体大小"
              v-model:value="params.secondaryMenuSize"
              size="medium"
              v-model:show="show4"
              :options="options1"
            >
              <template #arrow>
                <transition name="slide-left">
                  <icons v-if="!show4" class="icon" name="adown" />
                  <icons v-else class="icon" name="atop" />
                </transition>
              </template>
            </n-select>
          </div>
          <div class="item-style" @click="showColor2 = !showColor2">
            <div class="text">A</div>
            <icons v-if="!showColor2" class="icons" name="adown" />
            <icons v-else class="icons" name="atop" />
            <n-color-picker
              :show="showColor2"
              :show-alpha="false"
              v-model:value="params.secondaryMenuFontColor"
              class="color-picker"
              :render-label="bgColorLabel"
              @update:show="aaa"
            />
          </div>
          <div
            class="item-style bold"
            @click="params.secondaryMenuIsBlod = !params.secondaryMenuIsBlod"
            :style="{
              fontWeight: params.secondaryMenuIsBlod ? 'bold' : 'normal',
            }"
          >
            B
          </div>
        </div>
        <div class="level-menu margin-left20">二级菜单背景色</div>
        <div class="bg-color">
          <n-color-picker
            class="color-picker"
            :show-alpha="false"
            :render-label="bgColorLabel"
            v-model:value="params.secondaryMenuBackgroundColor"
          />
        </div>
      </div>
      <div class="setting-item">
        <div class="level-menu">背景颜色</div>
        <div class="bg-color">
          <n-color-picker
            class="color-picker"
            :show-alpha="false"
            :render-label="bgColorLabel"
            v-model:value="params.backgroundColor"
          />
        </div>
      </div>
      <div class="bg-img">
        <div class="level-menu">背景图片</div>
        <div class="img-upload">
          <n-upload
            list-type="image-card"
            :default-file-list="previewFileList"
            :custom-request="customRequest"
            accept="image/png, image/jpeg,image/webp"
            :max="1"
            @remove="removeImg"
          >
            点击上传
          </n-upload>
          <div class="notice">建议上传尺寸1920*1080</div>
        </div>
      </div>
      <div class="submit-btn" @click="InsertOrUpdateSystemFontFun">保存</div>
    </div>
  </n-modal>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { uuid } from "@/tools/radom";
import { UploadCustomRequestOptions } from "naive-ui";
import { tmpStore } from "@/store/modules/template";
import { useAppStore } from "@/store/modules/user";
import { UploadFile, InsertOrUpdateSystemFont, GetSystemFont } from "@/server";
const store = useAppStore();
const template = tmpStore();
const show1 = ref(false);
const show2 = ref(false);
const show3 = ref(false);
const show4 = ref(false);
const showColor1 = ref(false);
const showColor2 = ref(false);
const options = ref([
  { value: "黑体", label: "黑体" },
  { value: "思源", label: "思源" },
]);
const options1 = ref([
  { value: "12", label: "12号" },
  { value: "14", label: "14号" },
  { value: "16", label: "16号" },
  { value: "18", label: "18号" },
  { value: "20", label: "20号" },
  { value: "22", label: "22号" },
  { value: "24", label: "24号" },
  { value: "26", label: "26号" },
]);
const previewFileList = ref([]) as any;
const systemData = computed(() => template.systemData);
const params = ref(systemData.value) as any;
watch(
  () => systemData.value,
  (val) => {
    params.value = Object.assign({}, val);
    if (val.backgroundPicture) {
      previewFileList.value = [
        {
          id: "1",
          name: "",
          status: "finished",
          url: val.backgroundPicture,
        },
      ];
    } else {
      previewFileList.value = [];
    }
  }
);
const systemSwitch = computed(() => template.systemSwitch);
const bgColorLabel = () => {
  return "";
};
const removeImg = () => {
  params.value.backgroundPicture = "";
};
const aaa = (a: any) => {
  showColor1.value = a;
  showColor2.value = a;
};
const customRequest = async ({
  file,
  data,
  onFinish,
  onError,
  onProgress,
}: UploadCustomRequestOptions) => {
  const formData = new FormData();
  console.log("data", data);
  console.log("file", file);
  if (file && file.type) {
    const fileName = file.name;
    const fileExtension = fileName.split(".").pop();
    const randomSuffix = uuid();
    // 构建新文件名
    const newFileName = `${randomSuffix}.${fileExtension}`;
    // 创建一个新的File对象，用新文件名替换原文件名
    formData.append("file", file.file as File, newFileName);
    // 创建一个新Blob对象，将文件内容复制到其中
    onProgress({ percent: 10 });
    const res: any = await UploadFile(formData);
    if (res.result.isSuccess) {
      onProgress({ percent: 100 });
      const imgUrl = res.result.result.fileName; //图片上传的路径
      console.log("imgUrl", imgUrl);

      params.value.backgroundPicture = imgUrl;
      setTimeout(() => {
        onFinish();
      }, 500);
    } else {
      onError();
      store.error(res.result.message); // 错误提示
    }
  }
};
const closeBtn = () => {
  template.openSysPop(false);
};
//保存更新
const InsertOrUpdateSystemFontFun = async () => {
  if (!params.value.systemName) {
    store.warning("请输入系统名称");
    return false;
  }
  const res: any = await InsertOrUpdateSystemFont({ data: params.value });
  if (res.result.isSuccess) {
    store.success("保存成功"); // 错误提示
    getSystemFontFun();
    closeBtn();
  } else {
    store.error(res.result.message); // 错误提示
  }
};
//获取系统设置信息
const getSystemFontFun = async () => {
  const res: any = await GetSystemFont({ Token: "" });
  if (res.result.isSuccess) {
    template.setSystemInfo(res.result.result);
  } else {
    store.error(res.result.message); // 错误提示
  }
};
</script>
<style lang="less" scoped>
.sys-dialog {
  //系统设置弹框样式
  .title-font {
    font-size: 24px;
    color: #02a8ae;
  }
  .setting-dialog {
    user-select: none;
    font-size: 16px;
    :deep(.n-input) {
      --n-color: #60676c !important;
      --n-color-focus: #60676c !important;
      --n-text-color: rgb(255, 255, 255) !important;
      --n-placeholder-color: rgba(255, 255, 255, 0.2) !important;
      --n-border-hover: 1px solid #02a8ae !important;
      --n-border-focus: 1px solid #02a8ae !important;
      --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    :deep(.n-input__input) {
      text-align: left !important;
    }
    .setting-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    .level-menu {
      margin-right: 20px;
    }
    .bg-color {
      width: 26px;
      height: 26px;
      .color-picker {
        --n-height: 26px !important;
        :deep(.n-color-picker-trigger__fill) {
          left: 2px !important;
          top: 2px !important;
          bottom: 2px !important;
          right: 2px !important;
        }
      }
    }
    .bg-img {
      display: flex;
      .img-upload {
        width: 152px;
        height: 86px;
        :deep(.n-upload) {
          --n-dragger-color: #60676c !important;
          --n-dragger-border-hover: 1px dashed rgba(2, 168, 174, 1) !important;
        }
        :deep(.n-upload-trigger--image-card) {
          width: 152px;
          height: 86px;
        }
        .notice {
          font-size: 12px;
          color: #d8d8d8;
        }
      }
    }
    .margin-left20 {
      margin-left: 20px;
    }
    .style-check {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 308px;
      height: 38px;
      padding: 0 8px;
      background: #d8d8d8;
      box-shadow: 0px 0px 10px 0px rgba(197, 197, 197, 0.5);
      border-radius: 22px;
      .item-style {
        cursor: pointer;
        flex: 1;
        position: relative;
        font-size: 14px !important;
        display: flex;
        justify-content: center;
        &.bold {
          font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
          font-weight: 800;
          color: #000000;
          line-height: 21px;
        }
        .font-select {
          width: 90px;
          :deep(.n-base-selection) {
            --n-border: rgba(255, 255, 255, 0) !important;
            --n-border-active: none !important;
            --n-border-focus: none !important;
            --n-border-hover: none !important;
            --n-box-shadow-active: none !important;
            --n-box-shadow-focus: none !important;
            .n-base-suffix__arrow {
              color: #000;
            }
          }
          :deep(.n-base-selection-label) {
            background: none;
          }
        }
        .font-size-select {
          width: 60px;
        }
        .icons {
          position: absolute;
          right: 0;
          top: 6px;
          color: #000;
        }
        .color-picker {
          position: absolute;
          bottom: -2px;
          width: 16px;
          height: 5px;
          --n-height: 4px !important;
          :deep(.n-color-picker-trigger__fill) {
            left: 0px !important;
            top: 0px !important;
            bottom: 0px !important;
            right: 0px !important;
          }
        }
      }
    }
    :deep(.slide-left-enter-active),
    :deep(.slide-left-leave-active) {
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    :deep(.slide-left-enter-from),
    :deep(.slide-left-leave-to) {
      position: absolute;
      opacity: 0;
    }
    .submit-btn {
      cursor: pointer;
      margin: 50px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 36px;
      background: #01c0e4;
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08),
        0px 2px 5px 0px rgba(25, 15, 15, 0.07),
        0px 5px 8px 0px rgba(0, 0, 0, 0.05);
      font-size: 21px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 33px;
    }
  }
}
</style>
<style>
.n-base-close {
  --n-close-icon-color: #ffffff;
  color: #ffffff !important;
}
</style>
